import datahelper from "../helper/datahelper.mjs";
import viewmode from "../lib/viewmode.mjs";
import { render_object, render_array } from "./renderers.mjs";

/**
 * JSON Schema 编辑器组件
 * 根据 schema 定义渲染表单，支持编辑和只读两种模式
 *
 * @param {Object} params 参数对象
 * @param {HTMLElement} params.container 容器元素
 * @param {Object} params.template 模板配置
 * @param {Object} params.template.jsonschema JSON Schema 定义
 * @param {Object} [params.template.data] 初始数据
 * @param {string} [params.template.mode] 显示模式，支持 "edit" 或 "read"，默认从 viewmode 获取
 * @param {string} [params.template.path] 指定要渲染的 schema 节点路径，格式为 "node/subnode/subnode"
 */
export default function ({ container, template }) {
  // 创建根元素
  const el = document.createElement("jsonschema");
  container.appendChild(el);

  // 设置渲染函数
  el.thin_render = render;
  el.thin_render();

  // 监听数据更新事件
  el.addEventListener("thin_data_change", (event) => {
    const { path, value, data } = event.detail;
    console.log(`Data updated at path: ${path}`, value);

    // 更新完整数据
    el.thin_data = data;

    // 触发父容器的数据更新
    const parentEvent = new CustomEvent("thin_data_update", {
      detail: { data },
      bubbles: true,
    });
    container.dispatchEvent(parentEvent);
  });

  /**
   * 根据路径获取指定节点的 schema
   * @param {Object} schema 完整的 schema 对象
   * @param {string} path 节点路径
   * @returns {Object} 目标节点的 schema
   */
  function getSchemaByPath(schema, path) {
    if (!path) return schema;

    const nodes = path.split("/");
    let currentSchema = schema;

    for (const node of nodes) {
      if (
        currentSchema.type === "object" &&
        currentSchema.properties &&
        currentSchema.properties[node]
      ) {
        currentSchema = currentSchema.properties[node];
      } else if (currentSchema.type === "array" && currentSchema.items) {
        currentSchema = currentSchema.items;
      } else {
        console.warn(`Invalid path: ${path}`);
        return schema;
      }
    }
    return currentSchema;
  }

  /**
   * 渲染函数
   * 初始化数据并开始渲染整个表单
   */
  function render() {
    // 获取初始数据
    let data = datahelper({ container, template });
    // 确定显示模式：优先使用模板中指定的模式，否则从 viewmode 获取
    let mode = template.mode || viewmode(container);

    // 只获取指定路径的 schema，保持完整的数据对象
    const targetSchema = getSchemaByPath(template.jsonschema, template.path);

    console.log("Initial data:", data);

    // 保存完整数据到元素上
    el.thin_data = data;
    // 设置显示模式，用于 CSS 样式控制
    el.dataset.mode = mode;

    // 根据 schema 类型选择合适的渲染器
    if (targetSchema.type === "array") {
      render_array({
        container: el,
        schema: targetSchema,
        data,
        mode,
      });
    } else {
      render_object({
        container: el,
        schema: targetSchema,
        data,
        mode,
      });
    }
  }
}
